<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no" name="viewport">
  <title>注册页面</title>
  <link rel="stylesheet" href="./assets/css/app.min.css">
  <link rel="stylesheet" href="./assets/bundles/jquery-selectric/selectric.css">
  <link rel="stylesheet" href="./assets/css/style.css">
  <link rel="stylesheet" href="./assets/css/components.css">
  <link rel="stylesheet" href="./assets/css/custom.css">
  <link rel='shortcut icon' type='image/x-icon' href='./assets/img/favicon.ico' />
</head>

<body>
<div id="registerVue">
  <div class="loader"></div>
  <div id="app">
    <section class="section">
      <div class="container mt-5">
        <div class="row">
          <div class="col-12 col-sm-10 offset-sm-1 col-md-8 offset-md-2 col-lg-8 offset-lg-2 col-xl-8 offset-xl-2">
            <div class="card card-primary">
              <div class="card-header">
                <h4>书友网注册用户</h4>
              </div>
              <div class="card-body">
                <div :model="registerForm" >
                  <div class="row">
                    <div class="form-group col-12">
                      <label for="nick_name">请输入昵称</label>
                      <input id="nick_name" type="text" v-model="registerForm.nickName" class="form-control" name="nick_name" autofocus>
                    </div>
                  </div>
                  <div class="form-group">
                    <label for="account">请输入登录名</label>
                    <input id="account" type="test" v-model="registerForm.account" class="form-control">
                    <div class="invalid-feedback">
                    </div>
                  </div>
                  <div class="row">
                    <div class="form-group col-6">
                      <label for="password" class="d-block">请输入密码</label>
                      <input id="password" type="password" v-model="registerForm.password1" class="form-control" name="password">
                    </div>
                    <div class="form-group col-6">
                      <label for="password2" class="d-block">请确认密码</label>
                      <input id="password2" type="password" class="form-control" v-model="registerForm.password2" name="password-confirm">
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="custom-control custom-checkbox">
                      <input type="checkbox" v-model="registerForm.agree" name="agree" class="custom-control-input" id="agree">
                      <label class="custom-control-label" for="agree">我同意本系统的条款和条件。</label>
                    </div>
                  </div>
                  <div class="form-group">
                    <button type="submit" @click="registerClick" class="btn btn-primary btn-lg btn-block">
                      注册
                    </button>
                  </div>
                </div>
              </div>
              <div class="mb-4 text-muted text-center">
                You already have an account ? <a href="Login.html">跳转至登录</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</div>

  <script src="./common/js/vue.js"></script>
  <!-- Jquery Js -->
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/layer/2.3/layer.js"></script>
  <script src="./common/js/common.js"></script>
  <script src="./assets/js/app.min.js"></script>
  <script src="./assets/bundles/jquery-pwstrength/jquery.pwstrength.min.js"></script>
  <script src="./assets/bundles/jquery-selectric/jquery.selectric.min.js"></script>
  <script src="./assets/js/page/auth-register.js"></script>
  <script src="./assets/js/scripts.js"></script>
<script>
  const vm = new Vue({
    el: "#registerVue",
    data: {
      registerForm:{
        nickName : "",
        account : "",
        password1: "",
        password2: "",
        agree :""
      },
    },
    methods:{
      registerClick(){
        const that = this;
        if (that.registerForm.nickName == ""){
          layer.msg("昵称不为空!",{icon:2,time:1500});
          return false;
        }
        if (that.registerForm.account == ""){
          layer.msg("登录账户不为空!",{icon:2,time:1500});
          return false;
        }
        if (that.registerForm.password1 == "" || that.registerForm.password2 == ""){
          layer.msg("登录密码不为空!",{icon:2,time:1500});
          return false;
        }
        if (that.registerForm.password1 != that.registerForm.password2){
          layer.msg("两次密码不相同!",{icon:2,time:1500});
          return false;
        }
        if (!that.registerForm.agree){
          layer.msg("请您先同意用户协议!",{icon:2,time:1500});
          return false;
        }
        if (!PasswordCheck(that.registerForm.password1)){
          layer.msg("密码必须是6-16位的数字+字母组合!",{icon:2,time:1500});
          return false;
        }
        const user={
          "nickName":that.registerForm.nickName,
          "account":that.registerForm.account,
          "password":that.registerForm.password1,
        };
        HttpPost("/user/register",user,function(res){
          if (res.result == true){
            layer.msg("注册成功，正在为您跳转到登录页面",{icon:1,time:2000},function () {
              location.href = "Login.html";
            });
          }else{
            layer.msg(res.message,{icon:2,time:2000});
          }
        })
      }
    },
  })
</script>
</body>

</html>
